<template>
	<view class="num-edit">
		<view class="cut" @click="del">
			-
		</view>
		<view class="input">
			<input @change="change" v-model="number" type="number" class="inp" value="" />
		</view>
		<view class="add" @click="add">
			+
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			value:Number
		},
		computed:{
			number:{
				get:function(){
					return this.value
				},
				set:function(newVal){
					this.$emit("input",newVal)
				}
			},
		},
		methods:{
			change(val){
			   this.$emit("change",val)	
			},
			add(){
				this.number ++
			},
			del(){
				if(this.number>0){
						this.number --
				}
			}
			
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="stylus">
	.num-edit
		display flex
		align-items center
		.input
			width:81upx;
			height:41upx;
			border:1Px solid rgba(162,162,162,1);
			color #4E3E08
			font-size:27upx;
			line-height 39upx
			text-align center
			border-left  none
			border-right none
		.cut,.add
			width:46upx;
			height:45upx;
			color:rgba(162,162,162,1);
			border-style solid
			font-size 27upx
			line-height 43upx
			text-align center
		.cut
			border 1Px solid  rgba(162,162,162,1);
			border-radius:5upx 0px 0px 5upx;
		.add
			border 1Px solid  rgba(162,162,162,1);
			border-radius:0px 5upx 5upx 0px;
				
			
		
</style>
